import './App.css'
import { BrowserRouter, Route } from 'react-router-dom'
import { Layout, Menu, Breadcrumb } from 'antd';
import { Home } from './pages/home';
import { Article } from './pages/article';


const { Header, Content, Footer } = Layout;

function App() {
    return (
        <Layout className="app">
            <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }} className="header">
                <div className="logo" />
                <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                    <Menu.Item key="1">nav 1</Menu.Item>
                    <Menu.Item key="2">nav 2</Menu.Item>
                    <Menu.Item key="3">nav 3</Menu.Item>
                </Menu>
            </Header>
            <Content className="site-layout content" >
                <div className="site-layout-background" style={{ height: "100%", padding: 24 }}>
                    <BrowserRouter>
                        <Route component={Home} path="/" exact></Route>
                        <Route component={Article} path="/article/:id"></Route>
                    </BrowserRouter>
                </div>
            </Content>
            <Footer className="footer" style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
    )
}

export default App
